<script lang="ts" setup>
import {useRoute} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import { requestSimilarSinger } from "../../../utils/axiosURL"
import useSingerID from "../../../store/singerID";
import defaultImg from "../../../assets/logo.png";

const use_singerID = useSingerID()
const route = useRoute()
const SingerQueryID = ref<any>(route.query.id)
// 存储相似歌手数据
const similarSingerArr = reactive<any>([])

onMounted(() => {
  requestSimilarSingerFn()
})

const requestSimilarSingerFn = () => {
  requestSimilarSinger(SingerQueryID.value).then((data: any) => {
    similarSingerArr.values = data.artists
  }).catch(_ => { })
}

// 注册局部自定义指令
const vLazy = {
  mounted(el: HTMLImageElement, binding: any) {
    // el表示使用指令的DOM元素
    // bindings表示指令相关的信息是一个对象 如v-lazy="xxx",bindling即是xxx对应的内容
    // 指令的功能：实现图片的懒加载
    // 1、监听图片是否进入可视区
    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
      // true；进入可视区域，false：未进入可视区域
      if (isIntersecting) {
        // 1、给图片的src属性赋值图片的地址
        el.src = binding.value
        // 2、取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
        observer.unobserve(el)
        // 3、加载的图片失败了，显示默认的图片地址
        el.onerror = () => {
          el.src = defaultImg
        }
      }
    }, {
      threshold: 0
    })
    observer.observe(el)
  },
};
</script>

<template>
  <div class="similarWrap">
    <div class="SingerWrap" v-if="similarSingerArr.values.length">
      <div class="singerItem" v-for="item in similarSingerArr.values">
        <RouterLink :to="`/SingerDetail/${item.id}`">
          <div class="topImg">
            <img v-lazy="item.picUrl" alt="" @click="() => use_singerID.change(item.id)">
          </div>
        </RouterLink>
        <div class="btmText">
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <div class="SingerWrap" v-else>
      <playListIntroduceSkeleton v-for="item in 10" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.similarWrap {
  width: 100%;
  margin-top: 30px;
  padding-left: 30px;
  box-sizing: border-box;

  .SingerWrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 20px;

    .singerItem {
      width: 18%;
      margin: 0 10px 10px 0;

      .topImg {
        width: 100%;
        height: 140px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 6px;
        }
      }

      .btmText {
        font-family: $textFont;
        font-size: $font-size-sm;
        line-height: 20px;
      }
    }
  }
}

:deep(.el-skeleton) {
  margin: 0 15px 0 0;
}


/* // 歌单图片响应式设置 */
@media screen and (min-width: 1100px) {
  .topImg {
    height: 150px !important;
  }
}

@media screen and (min-width: 1130px) {
  .topImg {
    height: 157px !important;
  }
}

@media screen and (min-width: 1160px) {
  .topImg {
    height: 162px !important;
  }
}

@media screen and (min-width: 1190px) {
  .topImg {
    height: 164px !important;
  }
}

@media screen and (min-width: 1220px) {
  .topImg {
    height: 170px !important;
  }
}

@media screen and (min-width: 1250px) {
  .topImg {
    height: 176px !important;
  }
}

@media screen and (min-width: 1280px) {
  .topImg {
    height: 182px !important;
  }
}

@media screen and (min-width: 1310px) {
  .topImg {
    height: 188px !important;
  }
}

@media screen and (min-width: 1340px) {
  .topImg {
    height: 194px !important;
  }
}

@media screen and (min-width: 1370px) {
  .topImg {
    height: 200px !important;
  }
}

@media screen and (min-width: 1400px) {
  .topImg {
    height: 206px !important;
  }
}

@media screen and (min-width: 1430px) {
  .topImg {
    height: 210px !important;
  }
}
</style>
